<template>
  <div>
    <a-list item-layout="horizontal" :data-source="msgLists">
      <a-list-item slot-scope="msg, index" :key="index" slot="renderItem" >
        <a-list-item-meta>
          <span slot="title">{{ msg.context }}</span>
          <a-badge slot="avatar" :dot="!msg.isCompleted">
            <a-avatar
              src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=115953062,1302390144&fm=26&gp=0.jpg"
            />
          </a-badge>
        </a-list-item-meta>
        <a-button
         :disabled="msg.isCompleted"
         size="small"
         type="primary"
         :style="{marginRight:'10px'}"
         @click="isRead(index)"
         >点击已读</a-button>
        <a-button
          danger size="small"
          type="danger"
          @click="deltodo(index)"
          >删除</a-button>
      </a-list-item>

    </a-list>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { message } from 'ant-design-vue'
export default {
  data () {
    return {
      msgLists: []
    }
  },
  mounted () {
    // 将vuex里面的数据拿出来渲染在页面上
    this.msgLists = this.$store.state.msge.msgLists
    // console.log(this.$store.state.msge.msgLists)
  },
  methods: {
    isRead (index) {
      this.set_msgLists(index)
    },
    deltodo (index) {
      message.success('删除成功', 2, () => {
        this.del_todo(index)
      })
    },
    ...mapMutations('msge', ['set_msgLists', 'del_todo'])
  }
}
</script>

<style lang="scss" scoped>
</style>
